<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>IKUN Studio</title>
        <style>
            *{
                box-sizing: border-box; 
            }

            /*无法解释*/
            sty{
                
            }
            
            body{
                margin: 0;
                font-family: Arial;
                padding: 10px;
                background: #f1f1f1;
            }
            .header{
                background-color: #F1F1F1;
                text-align: center;
                padding: 30px;
            }
            .topnav{
                overflow: hidden;
                background-color: #333;
            }
            .topnav a{
                float: left;
                display: block;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                transition-duration: 0.5s;
            }
            .artbottom{
                display: inline-block;
                border-radius: 4px;
                background-color: #333;
                border: none;
                color: #FFFFFF;
                text-align: center;
                font-size: 28px;
                padding: 20px;
                width: 250px;
                transition: all 0.5s;
                cursor: pointer;
                margin: 5px;
            }
            .artbottom span{
                cursor: pointer;
                display: inline-block;
                position: relative;
                transition: 0.5s;
            }
            .artbottom span:after{
                content: '»';
                position: absolute;
                opacity: 0;
                top: 0;
                right: -20px;
                transition: 0.5s;
            }
            .artbottom:hover span{
                padding-right: 25px;
            }
            .artbottom:hover span:after{
                opacity: 1;
                right: 0;
            }
            .topnav a:hover{
                background-color: #ddd;
                color: black;
                font-size: 20px;
            } 
            .leftcolumn{
                float: left;
                width: 75%;
            }
            .rightcolumn{
                float: left;
                width: 25%;
                background-color: #f1f1f1;
                padding-left: 20px;
            }
            .row:after{
                content: "";
                display: table;
                clear: both;
            }
            .card{
                background-color: white;
                padding: 20px;
                margin-top: 20px;
                border-radius: 12px;
            }
            .footer{
                background-color: #F1F1F1;
                text-align: centre;
                padding: 20px;
                margin-top: 20px;
            }
            @media screen and (max-width: 1300px) {
                .leftcolumn, .rightcolumn {
                    width: 100%;
                    padding: 0;
                }
            }
            @media screen and (max-width: 400px) {
               .topnav a {
                    float: none;
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h1>IKUN Studio<sub style="font-size: 15px;">爱坤工作室</sub></h1>
            <p>主页</p>
        </div>
        <div class="topnav">
            <a href="main.html">● <sty style="color: chartreuse;">主页</sty></a>
            <a href="#">文章</a>
            <a href="#">工具</a>
        </div>
        <div class="row">
            <div class="leftcolumn">
                <div class="card">
                    <h2>css基础</h2>
                    <h5>2025年6月1日</h5>
                    <p>毕</p>
                    <p>毕</p>
                </div>
                <div class="card">
                    <h2>css与html布局</h2>
                    <h5>2025年6月1日</h5>
                    <p>毕</p>
                </div>
            </div>
            <div class="rightcolumn">
                <div class="card">
                    <h2>关于我</h2>
                    <p>
                        我是爱坤
                    </p>
                </div>
                <div class="card">
                    <h3>热门文章</h3>
                    <div class="artbottom"><span>文章1</span></div>
                    <div class="artbottom"><span>文章2</span></div>
                    <div class="artbottom"><span>文章3</span></div>
                </div>
                <div class="card">
                    <h3>联系我</h3>
                    <p>
                        QQ:3825157084
                        <br>
                        Email:yinchenen0415@outlook.com
                    </p>
                </div>
            </div>
        </div>
        <div class="footer">
            IKUN Studio : yinchenen & snaped &copy; 版权所有
        </div>
    </body>
</html>